<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="aaton">
    
    <title>
        
            Javascript之浅拷贝与深拷贝 |
        
        aaton&#39;s study notes
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/font/css/fontawesome.min.css">

    
<link rel="stylesheet" href="/font/css/regular.min.css">

    
<link rel="stylesheet" href="/font/css/solid.min.css">

    
<link rel="stylesheet" href="/font/css/brands.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en"}
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066cc","logo":"/images/logo.svg","favicon":"/images/logo.svg","avatar":"/images/avatar.svg","font_size":null,"font_family":null,"hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":false,"percent":false}},"local_search":{"enable":false,"preload":false},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"default"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":false},"lazyload":{"enable":false},"comment":{"enable":false,"use":"valine","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":null,"github_admins":null,"repository":null,"client_id":null,"client_secret":null,"proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":true,"custom_label_list":["Trainee","Engineer","Architect"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":false},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"}
    KEEP.language_code_block = {"copy":"Copy code","copied":"Copied","fold":"Fold code block","folded":"Folded"}
    KEEP.language_copy_copyright = {"copy":"Copy copyright info","copied":"Copied","title":"Original article title","author":"Original article author","link":"Original article link"}
  </script>
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.svg">
                </a>
            
            <a class="logo-title" href="/">
               aaton&#39;s study notes
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                ABOUT
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">TAGS</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">ABOUT</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">Javascript之浅拷贝与深拷贝</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">aaton</span>
                            
                                <span class="author-label">Lv3</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-06-05 11:00:11</span>
        <span class="mobile">2023-06-05 11:00</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-05-11 23:22:23</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Javascript/">Javascript</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/Typescript/">Typescript</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/">深拷贝</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E6%B5%85%E6%8B%B7%E8%B4%9D/">浅拷贝</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.4k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>6 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <p><img src="https://cn.bing.com/th?id=OHR.CordouanLighthouse_ZH-CN6267155218_1920x1080.webp&qlt=50" alt="bing.com-科尔杜昂灯塔，罗扬市，夏朗德省，法国" title="bing.com-科尔杜昂灯塔，罗扬市，夏朗德省，法国"></p>
<p>Javascript中浅拷贝与深拷贝各自的含义、区别以及实现方式。</p>
<span id="more"></span>

<h1 id="1-浅拷贝"><a href="#1-浅拷贝" class="headerlink" title="1.浅拷贝"></a>1.浅拷贝</h1><p>提到浅拷贝和深拷贝，其实都是Javascript复制对象、拷贝数据的一种方式。但是复制的对象由于<mark>数据类型</mark>的不同，而应该采用不同的拷贝方式。在Javascript中对于<strong>原始类型</strong>的拷贝是<strong>直接复制数据</strong>的, 并没有深浅拷贝的区别, 我们讨论的<strong>深浅拷贝都只针对引用数据</strong>。</p>
<p>浅拷贝会创建一个新对象，拷贝对象的所有属性值。对于基本类型的数据来说，就是拷贝一份对应的值，但是对于引用类型的数据来说则是<strong>拷贝一份引用数据的引用地址</strong>。简单理解就是：浅拷贝复制的是对象的引用地址，<strong>没有开辟新的栈</strong>，复制的结果是两个对象指向同一个地址，所以修改其中一个对象的属性，另一个对象的属性也跟着改变了。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let arr1 = [1,2,3,4,5]</span><br><span class="line">let arr2 = arr1</span><br><span class="line">arr2.push(6)</span><br><span class="line">console.log(arr1)   //[1,2,3,4,5,6]</span><br><span class="line">console.log(arr2)   //[1,2,3,4,5,6]</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="2-深拷贝"><a href="#2-深拷贝" class="headerlink" title="2.深拷贝"></a>2.深拷贝</h1><p>深拷贝也会创建一个新对象，并拷贝对象的所有属性。对于基本数类型的数据来说，就是拷贝一份对应的值。如果是<strong>引用数据</strong>，就会<strong>重新分配一块内存</strong>，拷贝该引用数据的所有属性，然后将引用地址赋值给对应的属性。如果该引用数据中某个属性也是引用数据，则会继续一层层<strong>递归拷贝</strong>。简单说就是完整的拷贝了一份一模一样结构的数据, <strong>拷贝后的数据和源数据是没有任何关联的</strong>, 修改原数据不会修改到拷贝后的数据。</p>
<p><em>默认情况下，基本类型数据都是深拷贝。</em></p>
<ul>
<li><p>数组深拷贝</p>
<ul>
<li>ES6扩展运算符</li>
<li>Array.from()</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">// 深拷贝</span><br><span class="line">1、ES6扩展运算符</span><br><span class="line">let arr1 = [1,2,3]</span><br><span class="line">let arr2 = [...arr1]</span><br><span class="line">arr2.push(4)</span><br><span class="line">console.log(arr1)       //[1,2,3]</span><br><span class="line">console.log(arr2)       //[1,2,3,4]</span><br><span class="line"></span><br><span class="line">2、Array.from()</span><br><span class="line">let arr1 = [1,2,3]</span><br><span class="line">let arr2 = Array.from(arr1)</span><br><span class="line">arr2.push(4)</span><br><span class="line">console.log(arr1)       //[1,2,3]</span><br><span class="line">console.log(arr2)       //[1,2,3,4]</span><br><span class="line"></span><br><span class="line">// 浅拷贝</span><br><span class="line">let arr1 = [1,2,3]</span><br><span class="line">let arr2 = arr1</span><br><span class="line">arr2.push(4)</span><br><span class="line">console.log(arr1)       //[1,2,3,4]</span><br><span class="line">console.log(arr2)       //[1,2,3,4]</span><br></pre></td></tr></table></figure>

<ul>
<li><p>对象深拷贝</p>
<ul>
<li>JSON.stringify()</li>
<li>使用递归</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">1、JSON.stringify()</span><br><span class="line">//深拷贝拷贝多层, 每一级别的数据都会拷贝.</span><br><span class="line">var obj = &#123;</span><br><span class="line">    id: 1,</span><br><span class="line">    name: &#x27;andy&#x27;,</span><br><span class="line">    msg: &#123;</span><br><span class="line">        age: 18</span><br><span class="line">    &#125;,</span><br><span class="line">    color: [&#x27;pink&#x27;, &#x27;red&#x27;]</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">//利用 JSON 对象</span><br><span class="line">function deepCopy(obj) &#123;</span><br><span class="line">    let _obj = JSON.stringify(obj);</span><br><span class="line">    let newObj = JSON.parse(_obj);</span><br><span class="line">    return newObj;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let newObj = deepCopy(obj);</span><br><span class="line">newObj.msg.age = 22;</span><br><span class="line">console.log(newObj);  //22</span><br><span class="line">console.log(obj);  //18</span><br><span class="line"></span><br><span class="line">2、使用递归</span><br><span class="line">//深拷贝拷贝多层, 每一级别的数据都会拷贝.</span><br><span class="line">var obj = &#123;</span><br><span class="line">    id: 1,</span><br><span class="line">    name: &#x27;andy&#x27;,</span><br><span class="line">    msg: &#123;</span><br><span class="line">        age: 18</span><br><span class="line">    &#125;,</span><br><span class="line">    color: [&#x27;pink&#x27;, &#x27;red&#x27;]</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">var o = &#123;&#125;;</span><br><span class="line">//封装函数</span><br><span class="line">function deepCopy(newobj, oldobj) &#123;</span><br><span class="line">    for (var k in oldobj) &#123;</span><br><span class="line">        //判断我们的属性值属于那种数据类型</span><br><span class="line">        // 1. 获取属性值  oldobj[k]</span><br><span class="line">        var item = oldobj[k];</span><br><span class="line">        // 2. 判断这个值是否是数组(首先判断数组是因为数组也属于对象)</span><br><span class="line">        if (item instanceof Array) &#123;</span><br><span class="line">            newobj[k] = [];</span><br><span class="line">            deepCopy(newobj[k], item);</span><br><span class="line">        &#125; else if (item instanceof Object) &#123;</span><br><span class="line">            // 3. 判断这个值是否是对象</span><br><span class="line">            newobj[k] = &#123;&#125;;</span><br><span class="line">            deepCopy(newobj[k], item);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            // 4. 属于简单数据类型</span><br><span class="line">            newobj[k] = item;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">deepCopy(o, obj);</span><br><span class="line">o.msg.age = 20;</span><br><span class="line">console.log(o);</span><br><span class="line">console.log(obj);   //18</span><br><span class="line">var arr = [];</span><br><span class="line">console.log(arr instanceof Object);  // true 数组也是对象</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="3-Object-assign-slice-concat"><a href="#3-Object-assign-slice-concat" class="headerlink" title="3.Object.assign\slice\concat"></a>3.Object.assign\slice\concat</h1><p>这三种方法属于比较特殊当对象中只有一级属性，没有二级属性的时候，为深拷贝，但是对象中有对象的时候，<strong>在二级属性以后就是浅拷贝</strong>。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">1、Object.assign()</span><br><span class="line">//浅拷贝</span><br><span class="line">var obj = &#123;a:1,b:2,c:&#123;d:3,e:&#123;f:4&#125;&#125;&#125;</span><br><span class="line">var newObj = Object.assign(&#123;&#125;,obj)</span><br><span class="line">newObj.c.e.f = 22</span><br><span class="line">console.log(obj)    //&#123; a: 1, b: 2, c: &#123; d: 3, e: &#123; f: 22 &#125; &#125; &#125;</span><br><span class="line">console.log(newObj) //&#123; a: 1, b: 2, c: &#123; d: 3, e: &#123; f: 22 &#125; &#125; &#125;</span><br><span class="line">//深拷贝</span><br><span class="line">var obj = &#123;a:1,b:2&#125;</span><br><span class="line">var newObj = Object.assign(&#123;&#125;,obj)</span><br><span class="line">newObj.a = 22</span><br><span class="line">console.log(obj)    //&#123; a: 1, b: 2 &#125;</span><br><span class="line">console.log(newObj) //&#123; a: 22, b: 2 &#125;</span><br><span class="line"></span><br><span class="line">2、slice()</span><br><span class="line">//浅拷贝</span><br><span class="line">let arr1 = [1,2,3,[1,2,3,4,5,[0,0,0,0]]]</span><br><span class="line">let arr2 = arr1.slice()</span><br><span class="line">arr2[3].push(4)</span><br><span class="line">console.log(arr1)   //[ 1, 2, 3, [ 1, 2, 3, 4, 5, [ 0, 0, 0, 0 ], 4 ] ]</span><br><span class="line">console.log(arr2)   //[ 1, 2, 3, [ 1, 2, 3, 4, 5, [ 0, 0, 0, 0 ], 4 ] ]</span><br><span class="line">//深拷贝</span><br><span class="line">let arr1 = [1,2,3]</span><br><span class="line">let arr2 = arr1.slice()</span><br><span class="line">arr2.push(4)</span><br><span class="line">console.log(arr1)   //[ 1, 2, 3 ]</span><br><span class="line">console.log(arr2)   //[ 1, 2, 3, 4 ]</span><br><span class="line"></span><br><span class="line">3、concat()</span><br><span class="line">//浅拷贝</span><br><span class="line">let arr1 = [1,2,3,[1,2,3,4,5,[0,0,0,0]]]</span><br><span class="line">let arr2 = [].concat(arr1)</span><br><span class="line">arr2[3].push(4)</span><br><span class="line">console.log(arr1)   //[ 1, 2, 3, [ 1, 2, 3, 4, 5, [ 0, 0, 0, 0 ], 4 ] ]</span><br><span class="line">console.log(arr2)   //[ 1, 2, 3, [ 1, 2, 3, 4, 5, [ 0, 0, 0, 0 ], 4 ] ]</span><br><span class="line">//深拷贝</span><br><span class="line">let arr1 = [1,2,3]</span><br><span class="line">let arr2 = [].concat(arr1)</span><br><span class="line">arr2.push(4)</span><br><span class="line">console.log(arr1)   //[ 1, 2, 3 ]  </span><br><span class="line">console.log(arr2)   //[ 1, 2, 3, 4 ]</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="4-浅拷贝和深拷贝的区别"><a href="#4-浅拷贝和深拷贝的区别" class="headerlink" title="4.浅拷贝和深拷贝的区别"></a>4.浅拷贝和深拷贝的区别</h1><table>
<thead>
<tr>
<th></th>
<th>基本类型</th>
<th>引用类型</th>
<th>结果</th>
</tr>
</thead>
<tbody><tr>
<td>深拷贝</td>
<td>重新创建值</td>
<td>递归遍历, 拷贝所有属性</td>
<td>拷贝对象和源对象完成隔离</td>
</tr>
<tr>
<td>浅拷贝</td>
<td>重新创建值</td>
<td>复制引用地址</td>
<td>拷贝对象和源对象存在共同的引用对象</td>
</tr>
</tbody></table>
<hr>
<p><em><strong>本文参考文献：</strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/post/7207090090101866557#heading-18" >稀土掘金 ： 八股文: 讲讲什么是浅拷贝、深拷贝?<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/post/6994453856063062053#heading-8" >稀土掘金 ： JavaScript深拷贝和浅拷贝看这篇就够了<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://blog.csdn.net/icemwj/article/details/119782133" >CSDN ： JavaScript中浅拷贝和深拷贝的区别与实现<i class="fas fa-external-link-alt"></i></a></strong></em></p>

            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/">#深拷贝</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/%E6%B5%85%E6%8B%B7%E8%B4%9D/">#浅拷贝</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/06/05/Typescript%E4%B9%8B%E5%8F%AF%E9%80%89%E5%8F%82%E6%95%B0%E4%B8%8E%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">Typescript之可选参数与参数默认值</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                               rel="next"
                               href="/2023/06/05/Javascript%E4%B9%8B%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0/"
                            >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Javascript之构造函数</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                                <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                            </a>
                        </div>
                    
                </div>
            

            
        </div>

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
                <span>2020</span> -
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">aaton</a>
            
        </div>
        
            <script async 
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    Visitor Count&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                
                
                    Totalview&nbsp;<span id="busuanzi_value_site_pv"></span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>







    
<script src="/js/code-block.js"></script>





<div class="post-scripts">
    
        
<script src="/js/post-helper.js"></script>

        
        
    
</div>



</body>
</html>
